<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="utf-8"/>
  <meta content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" name="viewport">
  <title>钢琴界面</title>
  <link rel="stylesheet" href="../static/css/style.css">
  <link rel="stylesheet" href="../static/css/loopconponent.css">
  <link rel="stylesheet" href="../static/css/blackkey.css">
  <link rel="stylesheet" href="../static/css/whitekey.css">
  <link rel="stylesheet" href="../static/css/scale.css">
  <link rel="stylesheet" href="../static/css/line.css">
  <link rel="stylesheet" href="../static/css/pat.css">
  <link rel="stylesheet" href="../static/css/rectangle.css">
  <link rel="stylesheet" href="../static/css/buttonimg.css">
  <link rel="stylesheet" href="../static/css/piano.css">
  <link rel="stylesheet" href="../static/css/track.css">
  <link rel="stylesheet" href="../static/css/player.css">
  <script type="text/javascript"> 
    window.addEventListener('mousewheel', function(event){
      if (event.ctrlKey === true || event.metaKey) {
        event.preventDefault();
      }
      },{ passive: false});
 
      //firefox
      window.addEventListener('DOMMouseScroll', function(event){
          if (event.ctrlKey === true || event.metaKey) {
              event.preventDefault();
          }
      },{ passive: false});

    //绑定Div
    // document.getElementById('Labels').addEventListener('mousewheel', function(event){
    // if (event.ctrlKey === true || event.metaKey) {
    //   event.preventDefault();
    // }
    // },{ passive: false});

    // //firefox
    // document.getElementById('Labels').addEventListener('DOMMouseScroll', function(event){
    //     if (event.ctrlKey === true || event.metaKey) {
    //         event.preventDefault();
    //     }
    // },{ passive: false});
  </script>
  <!--控制点击播放单音的js文件-->
  <script src="../static/js/piano_audio.js"></script>
  <!-- Player -->
  <!-- shim -->
  <script src="../static/midijs/inc/shim/Base64.js" type="text/javascript"></script>
  <script src="../static/midijs/inc/shim/Base64binary.js" type="text/javascript"></script>
  <script src="../static/midijs/inc/shim/WebAudioAPI.js" type="text/javascript"></script>
  <!-- jasmid package -->
  <script src="../static/midijs/inc/jasmid/stream.js"></script>
  <script src="../static/midijs/inc/jasmid/midifile.js"></script>
  <script src="../static/midijs/inc/jasmid/replayer.js"></script>
  <!-- midi -->
  <script src="../static/midijs/js/midi/audioDetect.js"></script>
  <script src="../static/midijs/js/midi/gm.js"></script>
  <script src="../static/midijs/js/midi/loader.js"></script>
  <script src="../static/midijs/js/midi/player_self.js"></script>
  <script src="../static/midijs/js/midi/plugin.audiotag.js"></script>
  <script src="../static/midijs/js/midi/plugin.webaudio.js"></script>
  <script src="../static/midijs/js/midi/plugin.webmidi.js"></script>
  <!-- utils -->
  <script src="../static/midijs/js/util/dom_request_script.js"></script>
  <script src="../static/midijs/js/util/dom_request_xhr.js"></script>
  <script src="../static/midijs/soundfont/acoustic_grand_piano-ogg.js"></script>
  <script src="../static/js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div>
  <!-- 标签栏 -->
  <div id="ThemeTop">
    <div id="Labels">
      <div id="Chapter">
        <div id="ChapterWord">曲目11</div>
      </div>
      <button class="BtnMenu"></button>
      <div id="MainTrack">
        <button class="BtnTrackImg"></button>
        <div id="TrackWord">主旋律轨道</div>
      </div>
      <div id="OriginTune">
        <div id="OriginWord">原声钢琴</div>
      </div>
      <!-- volume -->
      <div class="volume">
        <div class="bar">
            <div class="bar1"></div>
            <div class="box"></div>
        </div>
      </div>
      <button class="BtnDownload"></button>
      <button class="BtnModify">AI修改</button>
      <button class="BtnPolish">乐理润色</button>
      <button class="BtnContinous">AI续写</button>
      <button class="BtnLock"></button>
      <button class="NoteX">
        <div id="NoteImg"></div>
        <div id="NoteWord">4</div>
      </button>
      <button class="BtnFourArrow"></button>
      <button class="BtnPencil"></button>
    </div>
    <!-- 标签栏分割线 -->
    <div id = "LineUnderLabels" style="position: absolute; bottom: 0px; left: 0px; width: 100%; 
          height: 1px; background-color: #d9d9d9;"> </div>
  </div>
  <!-- 播放器控制 -->
  <div id="ThemeBottom">
    <div id = "LineUpperLabels" style="position: absolute; top: 0px; left: 0px; width: 100%; 
          height: 1px; background-color: #d9d9d9;"> </div>
    <div id="ctrlPlayerField" >
      <!-- 输入BPM大于等于60小于等于180才有效 -->
      <div id="BPM">
          <input id="inputBPM" type="number" name="inputBPM" value="120" onclick="this.select()"
              onkeydown="if(event.keyCode==13){ if(value >= 60 && value <=180) SetRate(value); else popnote();}">
      </div>
      <button class="buttonlast" onclick="MIDI.Player.summaryShift(true);"></button>
      <button class="buttonrestart" onclick="pausePlayStop(true);"></button>
      <button class="buttonstop" onclick="pausePlayStop();"></button>
      <button class="buttonnext" onclick="MIDI.Player.summaryShift()"></button>
      <div id="TIME">00:00:00</div>
    </div>
  </div>
</div>
<div>
  <!-- 进度指针线 -->
  <div class="point">
    <div id="pointLine"></div>
  </div>
  <!-- BPM输入弹窗提醒 -->
  <div id="poptransparent">
    <div id="popup">
      <div id="robot"></div>
      <div id="popupnote">请输入（60-180）范围内的值！</div>
      <button class="buttonconfirm" onclick="hidderpop()">确定</button>
    </div>
  </div>
</div>
<script src="../static/js/playing.js"></script>

<!--    钢琴实现-->
<!--音乐文件导入-->
<audio id="c0" src="../static/piano/c0.mp3"></audio>
<audio id="d0" src="../static/piano/d0.mp3"></audio>
<audio id="e0" src="../static/piano/e0.mp3"></audio>
<audio id="f0" src="../static/piano/f0.mp3"></audio>
<audio id="g0" src="../static/piano/g0.mp3"></audio>
<audio id="a0" src="../static/piano/a0.mp3"></audio>
<audio id="b0" src="../static/piano/b0.mp3"></audio>
<audio id="c1" src="../static/piano/c1.mp3"></audio>
<audio id="d1" src="../static/piano/d1.mp3"></audio>
<audio id="e1" src="../static/piano/e1.mp3"></audio>
<audio id="f1" src="../static/piano/f1.mp3"></audio>
<audio id="g1" src="../static/piano/g1.mp3"></audio>
<audio id="a1" src="../static/piano/a1.mp3"></audio>
<audio id="b1" src="../static/piano/b1.mp3"></audio>
<audio id="c2" src="../static/piano/c2.mp3"></audio>
<audio id="d2" src="../static/piano/d2.mp3"></audio>
<audio id="e2" src="../static/piano/e2.mp3"></audio>
<audio id="f2" src="../static/piano/f2.mp3"></audio>
<audio id="g2" src="../static/piano/g2.mp3"></audio>
<audio id="a2" src="../static/piano/a2.mp3"></audio>
<audio id="b2" src="../static/piano/b2.mp3"></audio>
<audio id="c3" src="../static/piano/c3.mp3"></audio>
<audio id="d3" src="../static/piano/d3.mp3"></audio>
<audio id="e3" src="../static/piano/e3.mp3"></audio>
<audio id="f3" src="../static/piano/f3.mp3"></audio>
<audio id="g3" src="../static/piano/g3.mp3"></audio>
<audio id="a3" src="../static/piano/a3.mp3"></audio>
<audio id="b3" src="../static/piano/b3.mp3"></audio>
<audio id="c4" src="../static/piano/c4.mp3"></audio>
<audio id="d4" src="../static/piano/d4.mp3"></audio>
<audio id="e4" src="../static/piano/e4.mp3"></audio>
<audio id="f4" src="../static/piano/f4.mp3"></audio>
<audio id="g4" src="../static/piano/g4.mp3"></audio>
<audio id="a4" src="../static/piano/a4.mp3"></audio>
<audio id="b4" src="../static/piano/b4.mp3"></audio>
<audio id="c5" src="../static/piano/c5.mp3"></audio>
<audio id="d5" src="../static/piano/d5.mp3"></audio>
<audio id="e5" src="../static/piano/e5.mp3"></audio>
<audio id="f5" src="../static/piano/f5.mp3"></audio>
<audio id="g5" src="../static/piano/g5.mp3"></audio>
<audio id="a5" src="../static/piano/a5.mp3"></audio>
<audio id="b5" src="../static/piano/b5.mp3"></audio>
<audio id="c6" src="../static/piano/c6.mp3"></audio>
<audio id="d6" src="../static/piano/d6.mp3"></audio>
<audio id="e6" src="../static/piano/e6.mp3"></audio>
<audio id="f6" src="../static/piano/f6.mp3"></audio>
<audio id="g6" src="../static/piano/g6.mp3"></audio>
<audio id="a6" src="../static/piano/a6.mp3"></audio>
<audio id="b6" src="../static/piano/b6.mp3"></audio>
<audio id="c7" src="../static/piano/c7.mp3"></audio>


<audio id="c0s" src="../static/piano/c0s.mp3"></audio>
<audio id="d0s" src="../static/piano/d0s.mp3"></audio>
<audio id="f0s" src="../static/piano/f0s.mp3"></audio>
<audio id="g0s" src="../static/piano/g0s.mp3"></audio>
<audio id="a0s" src="../static/piano/a0s.mp3"></audio>
<audio id="c1s" src="../static/piano/c1s.mp3"></audio>
<audio id="d1s" src="../static/piano/d1s.mp3"></audio>
<audio id="f1s" src="../static/piano/f1s.mp3"></audio>
<audio id="g1s" src="../static/piano/g1s.mp3"></audio>
<audio id="a1s" src="../static/piano/a1s.mp3"></audio>
<audio id="c2s" src="../static/piano/c2s.mp3"></audio>
<audio id="d2s" src="../static/piano/d2s.mp3"></audio>
<audio id="f2s" src="../static/piano/f2s.mp3"></audio>
<audio id="g2s" src="../static/piano/g2s.mp3"></audio>
<audio id="a2s" src="../static/piano/a2s.mp3"></audio>
<audio id="c3s" src="../static/piano/c3s.mp3"></audio>
<audio id="d3s" src="../static/piano/d3s.mp3"></audio>
<audio id="f3s" src="../static/piano/f3s.mp3"></audio>
<audio id="g3s" src="../static/piano/g3s.mp3"></audio>
<audio id="a3s" src="../static/piano/a3s.mp3"></audio>
<audio id="c4s" src="../static/piano/c4s.mp3"></audio>
<audio id="d4s" src="../static/piano/d4s.mp3"></audio>
<audio id="f4s" src="../static/piano/f4s.mp3"></audio>
<audio id="g4s" src="../static/piano/g4s.mp3"></audio>
<audio id="a4s" src="../static/piano/a4s.mp3"></audio>
<audio id="c5s" src="../static/piano/c5s.mp3"></audio>
<audio id="d5s" src="../static/piano/d5s.mp3"></audio>
<audio id="f5s" src="../static/piano/f5s.mp3"></audio>
<audio id="g5s" src="../static/piano/g5s.mp3"></audio>
<audio id="a5s" src="../static/piano/a5s.mp3"></audio>
<audio id="c6s" src="../static/piano/c6s.mp3"></audio>
<audio id="d6s" src="../static/piano/d6s.mp3"></audio>
<audio id="f6s" src="../static/piano/f6s.mp3"></audio>
<audio id="g6s" src="../static/piano/g6s.mp3"></audio>
<audio id="a6s" src="../static/piano/a6s.mp3"></audio>

 <div class="piano">
<!--      第一个白键-->
      <div class="whitekey rec27"></div>
      <div class="whitekey rec28"></div>
      <div class="whitekey rec29"></div>
      <div class="whitekey rec30"></div>

      <div class="whitekey rec31"></div>
      <div class="whitekey rec32"></div>
      <div class="whitekey rec33"></div>

      <div class="whitekey rec34"></div>
      <div class="whitekey rec35"></div>
      <div class="whitekey rec36"></div>
      <div class="whitekey rec37"></div>

      <div class="whitekey rec38"></div>
      <div class="whitekey rec39"></div>
      <div class="whitekey rec40" onclick="play('c', 7)"></div>

      <div class="whitekey rec41" onclick="play('b', 6)"></div>
      <div class="whitekey rec42" onclick="play('a', 6)"></div>
      <div class="whitekey rec43" onclick="play('g', 6)"></div>
      <div class="whitekey rec44" onclick="play('f', 6)"></div>

      <div class="whitekey rec45" onclick="play('e', 6)"></div>
      <div class="whitekey rec46" onclick="play('d', 6)"></div>
      <div class="whitekey rec47" onclick="play('c', 6)"></div>

      <div class="whitekey rec48" onclick="play('b', 5)"></div>
      <div class="whitekey rec49" onclick="play('a', 5)"></div>
      <div class="whitekey rec50" onclick="play('g', 5)"></div>
      <div class="whitekey rec51" onclick="play('f', 5)"></div>

      <div class="whitekey rec52" onclick="play('e', 5)"></div>
      <div class="whitekey rec53" onclick="play('d', 5)"></div>
      <div class="whitekey rec54" onclick="play('c', 5)"></div>

      <div class="whitekey rec55" onclick="play('b', 4)"></div>
      <div class="whitekey rec56" onclick="play('a', 4)"></div>
      <div class="whitekey rec57" onclick="play('g', 4)"></div>
      <div class="whitekey rec58" onclick="play('f', 4)"></div>

      <div class="whitekey rec59" onclick="play('e', 4)"></div>
      <div class="whitekey rec60" onclick="play('d', 4)"></div>
      <div class="whitekey rec61" onclick="play('c', 4)"></div>

      <div class="whitekey rec62" onclick="play('b', 3)"></div>
      <div class="whitekey rec63" onclick="play('a', 3)"></div>
      <div class="whitekey rec64" onclick="play('g', 3)"></div>
      <div class="whitekey rec65" onclick="play('f', 3)"></div>

      <div class="whitekey rec66" onclick="play('e', 3)"></div>
      <div class="whitekey rec67" onclick="play('d', 3)"></div>
      <div class="whitekey rec68" onclick="play('c', 3)"></div>

      <div class="whitekey rec69" onclick="play('b', 2)"></div>
      <div class="whitekey rec70" onclick="play('a', 2)"></div>
      <div class="whitekey rec71" onclick="play('g', 2)"></div>
      <div class="whitekey rec72" onclick="play('f', 2)"></div>

      <div class="whitekey rec73" onclick="play('e', 2)"></div>
      <div class="whitekey rec74" onclick="play('d', 2)"></div>
      <div class="whitekey rec75" onclick="play('c', 2)"></div>

      <div class="whitekey rec76" onclick="play('b', 1)"></div>
      <div class="whitekey rec77" onclick="play('a', 1)"></div>
      <div class="whitekey rec78" onclick="play('g', 1)"></div>
      <div class="whitekey rec79" onclick="play('f', 1)"></div>

      <div class="whitekey rec80" onclick="play('e', 1)"></div>
      <div class="whitekey rec81" onclick="play('d', 1)"></div>
      <div class="whitekey rec82" onclick="play('c', 1)"></div>

      <div class="whitekey rec83" onclick="play('b', 0)"></div>
      <div class="whitekey rec84" onclick="play('a', 0)"></div>
      <div class="whitekey rec85" onclick="play('g', 0)"></div>
      <div class="whitekey rec86" onclick="play('f', 0)"></div>

      <div class="whitekey rec87" onclick="play('e', 0)"></div>
      <div class="whitekey rec88" onclick="play('d', 0)"></div>
      <div class="whitekey rec89" onclick="play('c', 0)"></div>

      <!--      第一个黑键-->
      <div class="blackkey reb100"></div>
      <div class="blackkey reb101"></div>
      <div class="blackkey reb102"></div>

      <div class="blackkey reb103"></div>
      <div class="blackkey reb104"></div>

      <div class="blackkey reb105"></div>
      <div class="blackkey reb106"></div>
      <div class="blackkey reb107"></div>

      <div class="blackkey reb108"></div>
      <div class="blackkey reb109"></div>

      <div class="blackkey reb110" onclick="plays('a', 6)"></div>
      <div class="blackkey reb111" onclick="plays('g', 6)"></div>
      <div class="blackkey reb112" onclick="plays('f', 6)"></div>

      <div class="blackkey reb113" onclick="plays('d', 6)"></div>
      <div class="blackkey reb114" onclick="plays('c', 6)"></div>

      <div class="blackkey reb115" onclick="plays('a', 5)"></div>
      <div class="blackkey reb116" onclick="plays('g', 5)"></div>
      <div class="blackkey reb117" onclick="plays('f', 5)"></div>

      <div class="blackkey reb118" onclick="plays('d', 5)"></div>
      <div class="blackkey reb119" onclick="plays('c', 5)"></div>

      <div class="blackkey reb120" onclick="plays('a', 4)"></div>
      <div class="blackkey reb121" onclick="plays('g', 4)"></div>
      <div class="blackkey reb122" onclick="plays('f', 4)"></div>

      <div class="blackkey reb123" onclick="plays('d', 4)"></div>
      <div class="blackkey reb124" onclick="plays('c', 4)"></div>

      <div class="blackkey reb125" onclick="plays('a', 3)"></div>
      <div class="blackkey reb126" onclick="plays('g', 3)"></div>
      <div class="blackkey reb127" onclick="plays('f', 3)"></div>

      <div class="blackkey reb128" onclick="plays('d', 3)"></div>
      <div class="blackkey reb129" onclick="plays('c', 3)"></div>

      <div class="blackkey reb130" onclick="plays('a', 2)"></div>
      <div class="blackkey reb131" onclick="plays('g', 2)"></div>
      <div class="blackkey reb132" onclick="plays('f', 2)"></div>

      <div class="blackkey reb133" onclick="plays('d', 2)"></div>
      <div class="blackkey reb134" onclick="plays('c', 2)"></div>

      <div class="blackkey reb135" onclick="plays('a', 1)"></div>
      <div class="blackkey reb136" onclick="plays('g', 1)"></div>
      <div class="blackkey reb137" onclick="plays('f', 1)"></div>

      <div class="blackkey reb138" onclick="plays('d', 1)"></div>
      <div class="blackkey reb139" onclick="plays('c', 1)"></div>

      <div class="blackkey reb140" onclick="plays('a', 0)"></div>
      <div class="blackkey reb141" onclick="plays('g', 0)"></div>
      <div class="blackkey reb142" onclick="plays('f', 0)"></div>

      <div class="blackkey reb143" onclick="plays('d', 0)"></div>
      <div class="blackkey reb144" onclick="plays('c', 0)"></div>
    </div>

<div class="音阶标号">
  <p class="C8">C8<p/>
  <p class="C7">C7<p/>
  <p class="C6">C6<p/>
  <p class="C5">C5<p/>
  <p class="C4">C4<p/>
  <p class="C3">C3<p/>
  <p class="C2">C2<p/>
  <p class="C1">C1<p/>
  <p class="C0">C0<p/>
</div >
<!--下面是节拍棋盘分割线（竖）-->
    <!--标尺实现-->
	<!--横纵线-->
<div class="lineH" ></div>
<div class="lineV"></div>

<!--    标尺节拍标号-->
<div class="节拍标号">
  <p class="num0">0</p>
  <p class="num1">1</p>
  <p class="num2">2</p>
  <p class="num3">3</p>
  <p class="num4">4</p>
  <p class="num5">5</p>
  <p class="num6">6</p>
  <p class="num7">7</p>
  <p class="num8">8</p>
  <p class="num9">9</p>
  <p class="num10">10</p>
  <p class="num11">11</p>
  <p class="num12">12</p>
  <p class="num13">13</p>
  <p class="num14">14</p>
  <p class="num15">15</p>
  <p class="num16">16</p>
  <p class="num17">17</p>
  <p class="num18">18</p>
  <p class="num19">19</p>
  <p class="num20">20</p>
  <p class="num21">21</p>
  <p class="num22">22</p>
  <p class="num23">23</p>
  <p class="num24">24</p>
  <p class="num25">25</p>
  <p class="num26">26</p>
  <p class="num27">27</p>
  <p class="num28">28</p>
  <p class="num29">29</p>
  <p class="num30">30</p>
  <p class="num31">31</p>
  <p class="num32">32</p>
  <p class="num33">33</p>
  <p class="num34">34</p>
  <p class="num35">35</p>
  <p class="num36">36</p>
  <p class="num37">37</p>
  <p class="num30">30</p>
  <p class="num38">31</p>
  <p class="num39">32</p>
  <p class="num40">40</p>
  <p class="num41">41</p>
  <p class="num42">42</p>
  <p class="num43">43</p>
  <p class="num44">44</p>
  <p class="num45">45</p>
  <p class="num46">46</p>
  <p class="num47">47</p>
  <p class="num48">48</p>
  <p class="num49">49</p>
  <p class="num50">50</p>
</div>

<div class="track"></div>
<!--    平铺实现所有矩形-->
<script type="text/javascript">
	var aDd = document.getElementsByClassName("track")[0];
	console.log("ok");
	for(var i=0;i<108;i++ ){
		var div = document.createElement("div");
		div.style.top = 110+i*20+"px";
		div.style.position = "absolute";
		div.style.left = 154 + "px";
		div.style.height = 20 + "px";
		div.style.display = "flex";
		div.style.marginLeft = -180+"px";
		div.style.marginTop = -110+"px";
		for(var j=0;j<200;j++){
			var div2 = document.createElement("div");
			div2.style.height = "20px";
			div2.style.width = "70px";
			var group = 8-i/12;
			var r = 0;
			var t = 0;
			switch(i%12) {
				case 0:r="c";t="";break;
				case 1:r="c";t="s";break;
				case 2:r="d";t="";break;
				case 3:r="d";t="s";break;
				case 4:r="e";t="";break;
				case 5:r="f";t="";break;
				case 6:r="f";t="s";break;
				case 7:r="g";t="";break;
				case 8:r="g";t="s";break;
				case 9:r="a";t="";break;
				case 10:r="a";t="s";break;
				case 11:r="b";t="";break;
			}
			var myclassname = r+group.toString()+t;
			var x = 1;
			var myid = i+"_"+j;//给每个方块设置id
			div2.id = myid;
			if(is_put.indexOf(myid) == -1){
				console.log('111');
			if(i%2==0)
				div2.style.backgroundColor = "#39404F";

			else
				div2.style.backgroundColor = "#2A2F32";
			}
			else{
				console.log('222');
				div2.style.backgroundColor = "blue"
			}
			div.appendChild(div2);
		}
		aDd.appendChild(div);
	}
	
	console.log("ok");
</script>
<script type="text/javascript">
	window.onload = () => {
		window.onclick = function(event){
			var mouseplace = getMousePos(event);
			var a = Math.floor((mouseplace.x-150)/70);
			var b = Math.floor((mouseplace.y-114)/20);
			
		}
		
		function getMousePos(event) {
		    var e = event || window.event;
		    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
		    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
		    var x = e.pageX || e.clientX + scrollX;
		    var y = e.pageY || e.clientY + scrollY;
		    alert('x: ' + x + '\ny: ' + y);
		    return { 'x': x, 'y': y };
		}
	}
	
	function changeColor(id){
		console.log(id);
		var clickMenu = document.getElementById(id);
		clickMenu.style.backgroundColor= "red";
		console.log(clickMenu.style.backgroundColor);
	}
</script>
</body>